<script setup lang="tsx">
import { ref, onMounted } from 'vue'
import { getChartnumAPI } from '@/api/search/index'
import middlebug from '@/assets/icon/middlebug.png'
import lowbug from '@/assets/icon/lowbug.png'
import highbug from '@/assets/icon/highbug.png'
const props = defineProps({
  id: { type: String, required: true },
  risklevel:{type:Number,required: true}
})
const chartRef = ref()
const init = () => {
  chartRef.value.loadingChart(true)
  chartRef.value.initChart()
}
const gaugeData = [
  {
    value: 100,
    name: props.risklevel<2?'低风险':props.risklevel>2?'高风险':'中风险',
    title: {
      show: true,
      offsetCenter: ['0%', '30%'],
      color: props.risklevel<2?'#578dc9':props.risklevel>2?'#b84337':'#e3c55f',
      fontSize: 30,
      fontWeight: '700',
    },
    detail: {
      show:false,
      valueAnimation: true,
      offsetCenter: ['0%', '30%']
    }
  }
]
const options = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: props.risklevel<2?'#578dc9':props.risklevel>2?'#b84337':'#e3c55f',
          // borderColor:props.risklevel<2?'rgba(87, 141, 201, 0.1)':props.risklevel>2?'rgba(184, 67, 55,0.1)':'rgba(227, 197, 95,0.1)',
          // borderWidth: 20
        }
      },
      axisLine: {
        lineStyle: {
          width: 8
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData
    }
  ],
  graphic: { // 添加 graphic 配置用于插入图片
    elements: [
      {
        type: 'image',
        style: {
          image: props.risklevel<2?lowbug:props.risklevel>2?highbug:middlebug, // 替换为你的图片地址
          width: 80, // 图片宽度
        },
        position: [110, 50], // 使用像素值
        origin: [50, 50] // 使用像素值
      }
    ]
  }
}
onMounted(() => {
  init()
})
</script>
<template>
  <div class="chart-content">
    <jmp-chart ref="chartRef" v-model:option="options"></jmp-chart>
  </div>
</template>
<style lang="scss" scoped></style>
